<template>
  <div>
    <nav class="common-nav mb30">
      <h2
        style="width: 140px"
        class="common-nav__title"
        :class="index === activeIndex ? 'tab_active' : ''"
        @click="switchNav(item, index)"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item.name }}
      </h2>
    </nav>
    <div class="khy" v-if="activeIndex === 0">
      <h6 class="khy-title">基础信息</h6>
      <section class="khy-container">
        <p>托运单号：{{ transportInfo.shipNumber || '--' }}</p>
        <p>托运人姓名：{{ transportInfo.shipperName || '--' }}</p>
        <p>托运人电话：{{ transportInfo.shipperPhone || '--' }}</p>
        <p>托运方社会信用代码：{{ transportInfo.shipperIdNum || '--' }}</p>
        <p>网络货运平台社会信用代码：{{ transportInfo.platformIdNum || '--' }}</p>
        <p>网络货运平台名称：{{ transportInfo.platformName || '--' }}</p>
        <p>风控等级：{{ transportInfo.riskLevel || '--' }}</p>
        <p>运输组织类型：{{ transportInfo.transportOrgType || '--' }}</p>
        <p>业务类型：{{ transportInfo.businessType || '--' }}</p>
        <p>运单号：{{ transportInfo.waybillNum || '--' }}</p>
        <p>运单录单时间：{{ transportInfo.waybillCreateTime || '--' }}</p>
        <p>运单开单时间：{{ transportInfo.transportBillDateTime || '--' }}</p>
        <p>运单发货时间：{{ transportInfo.loadingTime || '--' }}</p>
        <p>运单收货时间：{{ transportInfo.unloadingTime || '--' }}</p>
        <p>运输总车辆数：{{ transportInfo.totalVehicleNum || '--' }}</p>
        <p>运单总司机运费(元)：{{ transportInfo.totalCarrierFee || '--' }}</p>
        <p>运单完成日期：{{ transportInfo.endTime || '--' }}</p>
        <p>客户运费（元）：{{ transportInfo.shippingFee || '--' }}</p>
      </section>

      <h6 class="khy-title">发货信息</h6>
      <section class="khy-container">
        <p>
          发货地址省市区：
          {{ transportInfo.consignerAddrProv || '--' }}
          {{ transportInfo.consignerAddrCity || '--' }}
          {{ transportInfo.consignerAddrDistrict || '--' }}
        </p>
        <p>发货地址具体地址：{{ transportInfo.consignerAddrDes || '--' }}</p>
        <p>
          发货地址行政区域：
          {{ transportInfo.consignerAddrCity || '--' }}
          {{ transportInfo.consignerAddrDistrict || '--' }}
        </p>
      </section>

      <h6 class="khy-title">收货信息</h6>
      <section class="khy-container">
        <p>
          收货地址省市区：
          {{ transportInfo.consigneeAddrProv || '--' }}
          {{ transportInfo.consigneeAddrCity || '--' }}
          {{ transportInfo.consigneeAddrDistrict || '--' }}
        </p>
        <p>收货地址具体地址：{{ transportInfo.consigneeAddrDes || '--' }}</p>
        <p>
          收货地址行政区域：
          {{ transportInfo.consigneeAddrCity || '--' }}
          {{ transportInfo.consigneeAddrDistrict || '--' }}
        </p>
      </section>

      <h6 class="khy-title">托运合同信息</h6>
      <section class="khy-container">
        <p>合同id：{{ transportInfo.contractInfoResponse.shipNumber || '--' }}</p>
        <p>合同签订日期：{{ transportInfo.contractInfoResponse.signTime || '--' }}</p>
        <p>合同开始时间：{{ transportInfo.contractInfoResponse.beginTime || '--' }}</p>
        <p>合同结束时间：{{ transportInfo.contractInfoResponse.endTime || '--' }}</p>
        <p>
          合同PDF：<a
            v-if="transportInfo.contractInfoResponse.filePath"
            @click="goHtDetail(transportInfo.contractInfoResponse.filePath)"
            >查看</a
          >
        </p>
      </section>

      <h6 class="khy-title">托运支付流水</h6>
      <section class="khy-container">
        <p>支付金额：{{ transportInfo.shipperPayInfoResponse.payAmount || '--' }}</p>
        <p>支付方式：{{ transportInfo.shipperPayInfoResponse.payType || '--' }}</p>
        <p>付款银行账号：{{ transportInfo.shipperPayInfoResponse.payeeAccount || '--' }}</p>
        <p>银行流水号：{{ transportInfo.shipperPayInfoResponse.bankSeriesNo || '--' }}</p>
        <p>支付金融机构：{{ transportInfo.shipperPayInfoResponse.bankCode || '--' }}</p>
        <p>支付时间：{{ transportInfo.shipperPayInfoResponse.payTime || '--' }}</p>
      </section>
    </div>
    <div class="khy" v-if="activeIndex === 1">
      <BaseTable :columns="subColumns" v-bind="subTransport"></BaseTable>
    </div>
    <el-dialog
      title="子运单详情"
      :visible.sync="subTransportDialog"
      width="70%"
      :before-close="
        () => {
          this.subTransportDialog = false
        }
      "
    >
      <nav class="common-nav mb30">
        <h2
          style="width: 140px"
          class="common-nav__title"
          :class="index === subActiveIndex ? 'tab_active' : ''"
          @click="switchSubNav(item, index)"
          v-for="(item, index) in subNavList"
          :key="index"
        >
          {{ item.name }}
        </h2>
      </nav>
      <div v-if="subActiveIndex === 0" class="khy">
        <h6 class="khy-title">基础信息</h6>
        <section class="khy-container">
          <p>分段分单号：{{ subWayBillInfoResponse.subWaybillNum || '--' }}</p>
          <p>车牌号：{{ subWayBillInfoResponse.carNumber || '--' }}</p>
          <p>承运人证件号：{{ subWayBillInfoResponse.carrierIdentity || '--' }}</p>
          <p>装货时间：{{ subWayBillInfoResponse.subLoadingTime || '--' }}</p>
          <p>卸货时间：{{ subWayBillInfoResponse.subUnloadingTime || '--' }}</p>
        </section>
        <h6 class="khy-title">发货信息</h6>
        <section class="khy-container">
          <p>
            发货地址省市区：
            {{ subWayBillInfoResponse.subConsignerAddrProv || '--' }}
            {{ subWayBillInfoResponse.subConsignerAddrCity || '--' }}
            {{ subWayBillInfoResponse.subConsignerAddrDistrict || '--' }}
          </p>
          <p>发货地址经度：{{ subWayBillInfoResponse.consignerAddrLng || '--' }}</p>
          <p>发货地址纬度：{{ subWayBillInfoResponse.consignerAddrLat || '--' }}</p>
          <p>
            发货地址行政区域：
            {{ subWayBillInfoResponse.subConsignerAddrCity || '--' }}
            {{ subWayBillInfoResponse.subConsignerAddrDistrict || '--' }}
          </p>
        </section>
        <h6 class="khy-title">收货信息</h6>
        <section class="khy-container">
          <p>
            收货地址省市区：
            {{ subWayBillInfoResponse.subConsigneeAddrProv || '--' }}
            {{ subWayBillInfoResponse.subConsigneeAddrCity || '--' }}
            {{ subWayBillInfoResponse.subConsigneeAddrDistrict || '--' }}
          </p>
          <p>收货地址经度：{{ subWayBillInfoResponse.subConsigneeAddrLng || '--' }}</p>
          <p>收货地址纬度：{{ subWayBillInfoResponse.subConsigneeAddrLat || '--' }}</p>
          <p>
            收货地址行政区域：
            {{ subWayBillInfoResponse.subConsigneeAddrCity || '--' }}
            {{ subWayBillInfoResponse.subConsigneeAddrDistrict || '--' }}
          </p>
        </section>
        <h6 class="khy-title">货品信息</h6>
        <section class="khy-container">
          <p>货物名称：{{ subWayBillInfoResponse.goodsInfoResponse.goodsName || '--' }}</p>
          <p>货物类别：{{ subWayBillInfoResponse.goodsInfoResponse.goodsType || '--' }}</p>
          <p>货物件数：{{ subWayBillInfoResponse.goodsInfoResponse.goodsQuantity || '--' }}</p>
          <p>货物重量（克）：{{ subWayBillInfoResponse.goodsInfoResponse.goodsWeight || '--' }}</p>
          <p>货物体积（立方厘米）：{{ subWayBillInfoResponse.goodsInfoResponse.goodsVolume || '--' }}</p>
        </section>
        <h6 class="khy-title">承运合同信息</h6>
        <section class="khy-container">
          <p>合同id：{{ subWayBillInfoResponse.contractResponse.subWaybillNum || '--' }}</p>
          <p>合同签订日期：{{ subWayBillInfoResponse.contractResponse.signTime || '--' }}</p>
          <p>合同开始时间：{{ subWayBillInfoResponse.contractResponse.beginTime || '--' }}</p>
          <p>合同结束时间：{{ subWayBillInfoResponse.contractResponse.endTime || '--' }}</p>
          <p>
            合同PDF：<a
              v-if="subWayBillInfoResponse.contractResponse.filePdf"
              @click="goHtDetail(subWayBillInfoResponse.contractResponse.filePdf)"
              >查看</a
            >
          </p>
        </section>

        <h6 class="khy-title">支付信息</h6>
        <section class="khy-container">
          <p>支付金额（元）：{{ subWayBillInfoResponse.payInfoResponse.payAmount || '--' }}</p>
          <p>支付方式：{{ subWayBillInfoResponse.payInfoResponse.payType || '--' }}</p>
          <p>付款银行账号：{{ subWayBillInfoResponse.payInfoResponse.payerAccount || '--' }}</p>
          <p>银行流水号：{{ subWayBillInfoResponse.payInfoResponse.bankSeriesNo || '--' }}</p>
          <p>支付金融机构：{{ subWayBillInfoResponse.payInfoResponse.bankCode || '--' }}</p>
          <p>支付时间：{{ subWayBillInfoResponse.payInfoResponse.payTime || '--' }}</p>
        </section>
      </div>
      <div v-else-if="subActiveIndex === 1" class="khy">
        <BaseTable :columns="trailColumns" v-bind="trailTable"></BaseTable>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
export default {
  name: 'transportDetail',
  components: {
    BaseTable,
  },
  data() {
    return {
      trailColumns: [
        { label: '采集时间', prop: 'created' },
        { label: '经度', prop: 'geoLocationCoordinatesLng' },
        { label: '纬度', prop: 'geoLocationCoordinatesLat' },
        { label: '设备号', prop: 'device' },
      ],
      trailTable: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          Object.assign(this.trailTable.pagination, pagination)
          this.queryTrailList()
        },
      },
      subTransportDialog: false,
      activeIndex: 0,
      navList: [
        { name: '运单信息', id: 0 },
        { name: '子运单信息', id: 1 },
      ],
      subActiveIndex: 0,
      subNavList: [
        { name: '子运单信息', id: 0 },
        { name: '运输轨迹', id: 1 },
      ],
      subColumns: [
        { label: '分段分单号', prop: 'subWaybillNum' },
        { label: '车牌号', prop: 'carNumber' },
        { label: '承运人证件号', prop: 'carrierIdentity' },
        { label: '装货时间', prop: 'subLoadingTime' },
        { label: '卸货时间', prop: 'subUnloadingTime' },
        {
          label: '操作',
          prop: 'action',
          render: (val, row) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.goSubDetail(row)
                  }}>
                  查看详情
                </el-button>
              </div>
            )
          },
        },
      ],
      transportInfo: {
        businessType: '',
        consigneeAddrCity: '',
        consigneeAddrDes: '',
        consigneeAddrDistrict: '',
        consigneeAddrProv: '',
        consigneeDistrictCode: '',
        consignerAddrCity: '',
        consignerAddrDes: '',
        consignerAddrDistrict: '',
        consignerAddrProv: '',
        consignerDistrictCode: '',
        contractInfoResponse: {
          shipNumber: '',
          signTime: '',
          beginTime: '',
          endTime: '',
          filePath: '',
        },
        endTime: '',
        loadingTime: '',
        platformIdNum: '',
        platformName: '',
        riskLevel: '',
        shipNumber: '',
        shipperIdNum: '',
        shipperName: '',
        shipperPayInfoResponse: {
          bankCode: '',
          bankSeriesNo: '',
          payAmount: '',
          payTime: '',
          payType: '',
          payeeAccount: '',
          shipNumber: '',
        },
        shipperPhone: '',
        shippingFee: '',
        totalCarrierFee: '',
        totalVehicleNum: '',
        transportBillDateTime: '',
        transportOrgType: '',
        unloadingTime: '',
        waybillCreateTime: '',
        waybillNum: '',
      },
      subTransport: {
        pagination: false,
        data: [],
      },
      subWayBillInfoResponse: {
        carNumber: '',
        carrierIdentity: '',
        consignerAddrLat: '',
        consignerAddrLng: '',
        contractResponse: {
          beginTime: '',
          endTime: '',
          filePdf: '',
          signTime: '',
          subWaybillNum: '',
        },
        goodsInfoResponse: {
          goodsName: '',
          goodsQuantity: '',
          goodsType: '',
          goodsVolume: '',
          goodsWeight: '',
        },
        payInfoResponse: {
          bankCode: '',
          bankSeriesNo: '',
          payAmount: '',
          payTime: '',
          payType: '',
          payerAccount: '',
        },
        subConsigneeAddrCity: '',
        subConsigneeAddrCode: '',
        subConsigneeAddrDistrict: '',
        subConsigneeAddrLat: '',
        subConsigneeAddrLng: '',
        subConsigneeAddrProv: '',
        subConsignerAddrCity: '',
        subConsignerAddrCode: '',
        subConsignerAddrDistrict: '',
        subConsignerAddrProv: '',
        subLoadingTime: '',
        subUnloadingTime: '',
        subWaybillNum: '',
      },
      subWayBillNum: '',
    }
  },

  mounted() {
    this.shipNumber = this.$route.query.shipNumber
    this.queryYdInfo()
    this.querySubYdInfo()
  },
  methods: {
    /***
     * 查询企业的运单详情信息
     *
     * @returns {Promise<void>}
     */
    async queryYdInfo() {
      const res = await this.$http.post('/khy/wayBill/getWayBillInfo?shipNumber=' + this.shipNumber)
      this.transportInfo = res
    },
    /***
     * 查询运单的子运单列表信息
     *
     * @returns {Promise<void>}
     */
    async querySubYdInfo() {
      const res = await this.$http.post('/khy/wayBill/getSubWayBillList?shipNumber=' + this.shipNumber)
      this.subTransport.data = res
    },

    /***
     * 获取子运单详情
     * POST
     * @returns {Promise<void>}
     */
    async querySubYdDetailInfo() {
      const res = await this.$http.post('/khy/wayBill/getSubWayBillInfo?subWayBillNum=' + this.subWayBillNum)

      this.subWayBillInfoResponse = res
    },
    /***
     * 获取子运单轨迹
     *
     * @returns {Promise<void>}
     */
    async queryTrailList() {
      const res = await this.$http.post('/khy/wayBill/getDeviceList', {
        ascs: [],
        descs: [],
        current: this.trailTable.pagination.pageNo,
        limit: this.trailTable.pagination.pageSize,
        subWayBillNum: this.subWayBillNum,
      })
      this.trailTable.data = res.records
      this.trailTable.pagination.total = res.total
    },
    switchNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
      /*if (index === 0) {
        this.queryYdInfo()
      } else {
        this.querySubYdInfo()
      }*/
      this.queryYdInfo()
      this.querySubYdInfo()
    },
    switchSubNav(item, index) {
      if (this.subActiveIndex === index) return
      this.subActiveIndex = index
      if (index === 1) {
        this.queryTrailList()
      }
    },
    /***
     * 合同
     * 跳转
     * @returns {Promise<void>}
     */
    goHtDetail(url) {
      if (url.indexOf('http') === -1) {
        url = 'https://' + url
      }
      window.open(url, '__blank')
    },
    /***
     * 子运单信息
     * 跳转
     * @returns {Promise<void>}
     */
    goSubDetail(e) {
      let _ = this
      this.subTransportDialog = true

      this.subWayBillNum = e.subWaybillNum
      setTimeout(() => {
        _.querySubYdDetailInfo()
      }, 300)
    },
  },
}
</script>

<style lang="scss" scoped></style>
